<template>
  <div id="app">
	<div class="celerityTableHead">
		<vxe-button status="primary" @click="getJson">页面JSON</vxe-button>
		<vxe-button status="primary" @click="configDataSource">配置数据源</vxe-button>
		<vxe-button status="primary" @click="previewPage">预览页面</vxe-button>
	</div>
	<celerityTableDesign
		:pageJson="designPageJson"
		ref="celerityTableDesign"
	/>
	<dataSource :info="designPageJson" :dialog="dataSourceDialog" v-if="dataSourceDialog" @close="closeDataSource"/>
	<codeJson :info="designPageJson" :dialog="codeDialog" v-if="codeDialog" @close="closeCodeDialog"/>
	<previewPage :pageJson="designPageJson" :dictMap="dictMap" :dialog="previewDialog" v-if="previewDialog" @close="closePreviewDialog"/>
  </div>
</template>

<script>
import celerityTableDesign from '@/celerityTablePageView/celerityTableDesign'
import codeJson from '@/components/codeJson'
import dataSource from '@/components/dataSource'
import previewPage from '@/components/previewPage'
import pageJson from '@/assets/page.json'

export default {
  name: 'App',
  components: {
    celerityTableDesign,
	codeJson,
	previewPage,
	dataSource
  },
  data() {
      return {
        designPageJson: pageJson,
		codeDialog: false,
		dataSourceDialog: false,
		previewDialog: false,
		scratchable: {
			imageFiled: 'img',
			infoFiled: []
		}
      }
  },
  created () {
	document.title = '敏捷页面设计器';
  },
  watch: {
  },
  methods: {
		// 打开数据源弹窗
		configDataSource() {
			this.dataSourceDialog = true;
		},
		// 关闭数据源弹窗
		closeDataSource(json) {
			this.designPageJson = json
			this.dataSourceDialog = false;
		},
		// 打开预览弹窗
		previewPage() {
			this.$refs.gelineTablePageDesign.getJson(true).then((data) => {
				this.previewDialog = true;
				this.designPageJson = data;
			})
		},
		// 关闭预览弹窗
		closePreviewDialog() {
			this.previewDialog = false;
		},
		// 获取最新json并打开json弹窗
		getJson() {
			this.$refs.celerityTableDesign.getJson(true).then((data) => {
				this.codeDialog = true;
				this.designPageJson = data;
			})
		},
		// 关闭json弹窗
		closeCodeDialog() {
			this.codeDialog = false;
		},
  }
}
</script>

<style>
body {
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: #333;
}
.celerityTableHead {
	padding: 10px 20px;
	border-bottom: 1px solid #f0f0f0;
}
</style>
